import React from 'react';
import Lightbox from 'react-image-lightbox';
/**
 * 加载公共组件
 * */
import MainSection from '../../components/MainSection/MainSection';
import Avatar from '../../components/Avatar/Avatar';
import Panel from '../../components/Panel/Panel';


/**
 * 加载样式或图片文件
 * */
import './sass/photo.scss';
import 'antd/lib/tabs/style/index.less';

class Photo extends React.Component {
    constructor(props) {
        super(props);
        this.handleHideViewer = this.handleHideViewer.bind(this);
        this.state = {
            visible: false,
            photoIndex: 0,
            curSrc: ''
        };
    }

    handleShowViewer(item,index) {
        console.log(item);
        this.setState({
            visible: true,
            curSrc: item.split('?')[0],
            photoIndex: index
        })
    }
    handleHideViewer(){
        this.setState({
            visible: false,
            curSrc: ''
        })
    }

    render() {
        const {act} = this.props;
        const {photoIndex} =this.state;
        let photo = act.curRoom.album ? act.curRoom.album.split(',') : [];

        return (
            <MainSection className="photo" title="相册">
                <ul className="photo-list">
                    {
                        photo.map((item, index)=> {
                            return (
                                <img key={index} src={item + '?imageView2/1/w/200/h/200'} alt="" onClick={this.handleShowViewer.bind(this,item,index)}/>
                            )
                        })
                    }
                </ul>
                {
                    this.state.visible && <Lightbox
                        mainSrc={photo[photoIndex]}
                        nextSrc={photo[(photoIndex + 1) % photo.length]}
                        prevSrc={photo[(photoIndex + photo.length - 1) % photo.length]}
                        enableZoom={false}
                        imagePadding={0}
                        imageCaption={(((photoIndex + 1) % photo.length) || photo.length) + '/' + photo.length}
                        onCloseRequest={() => this.setState({ visible: false })}
                        onMovePrevRequest={() => this.setState({
                            photoIndex: (photoIndex + photo.length - 1) % photo.length,
                        })}
                        onMoveNextRequest={() => this.setState({
                            photoIndex: (photoIndex + 1) % photo.length,
                        })}
                    />
                }
            </MainSection>
        );
    }
}

export default Photo;